<script lang="ts" setup>
import align from '@/components/align.vue';
import centerAlign from '@/components/centerAlign.vue';
import flip from '@/components/flip.vue';

import clone from '@/components/clone.vue';
import hide from '@/components/hide.vue';
import group from '@/components/group.vue';
import lock from '@/components/lock.vue';
import dele from '@/components/del.vue';

import bgBar from '@/components/bgBar.vue';
import setSize from '@/components/setSize.vue';
import replaceImg from '@/components/replaceImg.vue';
import removeBackground from '@/components/removeBackground.vue';
import maskImg from '@/components/maskImg.vue';
import filters from '@/components/filters.vue';
import imgStroke from '@/components/imgStroke.vue';
// import elementData from '@/components/elementData.vue';
// 右侧组件
// import attribute from '@/components/attribute.vue';
import attributePostion from '@/components/attributePostion.vue';
import attributeId from '@/components/attributeId.vue';
import attributeShadow from '@/components/attributeShadow.vue';
import attributeBorder from '@/components/attributeBorder.vue';
import attributeRounded from '@/components/attributeRounded.vue';
import attributeFont from '@/components/attributeFont.vue';
import attributeTextFloat from '@/components/attributeTextFloat.vue';
import attributeColor from '@/components/attributeColor.vue';
import attributeBarcode from '@/components/attributeBarcode.vue';
import attributeQrCode from '@/components/attributeQrCode.vue';
import cropperImg from '@/components/cropperImg.vue';
import clipImage from '@/components/clipImage.vue';
// hooks
import useSelectListen from '@/hooks/useSelectListen';

const canvasEditor: any = inject('canvasEditor');

const { mixinState } = useSelectListen(canvasEditor);

const attrBarShow = ref(true);

// 属性面板开关
const switchAttrBar = () => {
  attrBarShow.value = !attrBarShow.value;
};
</script>

<template>
  <!-- 属性区域 380-->
  <div class="right-center-container">
    <!-- 未选择元素时 展示背景设置 -->
    <!-- <div v-show="!mixinState.mSelectMode">
      <set-size></set-size>
      <bg-bar></bg-bar>
    </div> -->

    <!-- 多选时展示 -->
    <div v-show="mixinState.mSelectMode === 'multiple'">
      <!-- 分组 -->
      <group></group>
      <!-- 组对齐方式 -->
      <align></align>
      <!-- 居中对齐 -->
      <center-align></center-align>
    </div>

    <div v-show="mixinState.mSelectMode === 'one'" class="attr-item-box">
      <!-- <h3>快捷操作</h3> -->
      <!-- 分组 -->
      <group></group>

      <div v-show="mixinState.mSelectMode">
        <lock></lock>
        <dele></dele>
        <clone></clone>
        <hide></hide>
        <edit></edit>
      </div>
      <!-- 居中对齐 -->
      <center-align></center-align>
      <!-- 翻转 -->
      <flip></flip>
      <!-- 图片滤镜 -->
      <filters></filters>
      <!-- 图片描边 -->
      <imgStroke />
      <!-- 颜色 -->
      <attributeColor></attributeColor>
      <!-- 圆角 -->
      <attributeRounded></attributeRounded>
    </div>
  </div>
</template>

<style lang="less" scoped>
.right-center-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
// 右侧容器
.right-bar {
  width: 304px;
  height: 100%;
  padding: 10px;
  overflow-y: auto;
  background: #fff;
}

// 属性面板样式
:deep(.attr-item) {
  position: relative;
  margin-bottom: 12px;
  height: 40px;
  padding: 0 10px;
  background: #f6f7f9;
  border: none;
  border-radius: 4px;
  display: flex;
  align-items: center;
  .ivu-tooltip {
    text-align: center;
    flex: 1;
  }
}
</style>
